<template>
  <el-button plain @click="dialogFormVisible_template = true">加载模板</el-button>
  <el-button plain @click="dialogFormVisible_jsonDatas = true">加载json数据记录</el-button>
  <el-button plain @click="dialogFormVisible_onUpdateDatasetList = true">加载外部数据集</el-button>
  <el-button plain @click="dialogFormVisible_onUpdateData = true">加载外部数据记录</el-button>
  <el-button @click="reportRender('xzreport_testReport1')">报表渲染</el-button>
  <el-button plain @click="_PrintInfo=!_PrintInfo;console.log(_PrintInfo)">切换打印信息{{_PrintInfo}}</el-button>
  <el-button @click="cleanCanvas('xzreport_testReport1')">清除画布</el-button>

  <el-dialog v-model="dialogFormVisible_template" title="加载模板" width="1980">
    <el-form :model="form" label-width="auto" style="max-width: 1860px"><br>
      <el-form-item label="template">
        <el-input v-model="form.template" type="textarea" rows="20" clearable class="scrollable-textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible_template = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmitTemplate">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogFormVisible_jsonDatas" title="加载json数据记录" width="1980">
    <el-form :model="form" label-width="auto" style="max-width: 1860px"><br>
      <el-form-item label="jsonDatas">
        <el-input v-model="form.jsonDatas" type="textarea" rows="20" clearable class="scrollable-textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible_jsonDatas = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmitJsonDatas">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogFormVisible_onUpdateDatasetList" title="加载外部数据集" width="1980">
    <el-form :model="form" label-width="auto" style="max-width: 1860px"><br>
      <el-form-item label="onUpdateDatasetList">
        <el-input v-model="form.onUpdateDatasetList" type="textarea" rows="20" clearable class="scrollable-textarea"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible_onUpdateDatasetList = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmitonUpdateDatasetList">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogFormVisible_onUpdateData" title="加载外部数据记录" width="1980">
    <el-form :model="form" label-width="auto" style="max-width: 1860px"><br>
      <el-form-item label="json">
        <el-input v-model="form.onUpdateData" type="textarea" rows="20" clearable
                  class="scrollable-textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible_onUpdateData = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmitonUpdateData">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <div id="xzreport_testReport1"></div>
</template>
<script setup>
import {onMounted, reactive, ref} from 'vue';

import {filterDatasetsFrom_params} from "@/utils/xzToolsUtil.js";

const dialogFormVisible_template = ref(false)
const dialogFormVisible_jsonDatas = ref(false)
const dialogFormVisible_onUpdateDatasetList = ref(false);
const dialogFormVisible_onUpdateData = ref(false);
const _PrintInfo=ref(false);

const form = reactive({
  template: reactive([]),//报表设计器的模板
  jsonDatas: reactive([]),//报表设计器输出的专门保存json结构和记录的字段
  onUpdateDatasetList: reactive([]),
  onUpdateData: reactive([])
})
let __template = [];
let __jsonDatas = [];      // json 数据需要初始化控件的时候传入 或者使用 update方法更新
let __onUpdateDatasetList = [];
let __onUpdateData = [];
let sheet;
const option = {
  mode: 'read',  //  报表模式  read | edit  只读模式|编辑模式
  view: {
    width: () => document.documentElement.clientWidth,
    height: () => document.documentElement.clientHeight
  },   // 设置报表的宽高
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
};
const reportRender = (div_id) => {
  if(_PrintInfo){
    console.log("..testReport.index.vue..div_id:",div_id);
    console.log("...testReport.index.vue...__template:",__template);
    console.log("..testReport.index.vue....__jsonDatas:",__jsonDatas);
    console.log("..testReport.index.vue....__onUpdateData:",__onUpdateData);
  }

  if (__template.length > 0) {
    if (__jsonDatas.length > 0) {
      try {
        if(_PrintInfo){
          console.log("11111111111.testReport.index.vue.. 报表模板+json数据集");
        }
        sheet.update(__template, __jsonDatas);
        // sheet = XZReport(div_id, option, __template, __jsonDatas);
      } catch (ex) {
        console.log(ex);
      }
    } else {
      if(_PrintInfo){
        console.log("2222222222.testReport.index.vue.. 报表模板  无json数据集,__jsonDatas.length:",__jsonDatas.length);
      }
      sheet.update(__template);
     // sheet = XZReport(div_id, option, __template, []);//如果报表设计器带有json数据集，必须初始化的时候提供，sheet.update(__template,__jsonDatas);
    }
  }else{
    if(_PrintInfo){
      console.log('...testReport.index.vue....__template.length  :', __template.length );
      console.log("33333333 .testReport.index.vue..报表模板为空:",__template,__jsonDatas);
    }

  }
}
const cleanCanvas = (div_id) => {
  document.getElementById(div_id).innerHTML = "";//不可以缺少，因为点击preview时候，config是有可能变了。
  __template = [];
  __jsonDatas = [];      // json 数据需要初始化控件的时候传入 或者使用 update方法更新
  __onUpdateDatasetList = [];
  __onUpdateData = [];
  form.template = reactive([]);
  form.onUpdateData = reactive([]);
  form.jsonDatas = reactive([])
  form.onUpdateDatasetList = reactive([])

  try {

    sheet = XZReport("#xzreport_testReport1", option);

  } catch (e) {
    console.log("....testReport.index.vue....cleanCanvas:", e);
  }
}
const onSubmitTemplate = () => {

  if (form.template.length > 0) {
    try {
      __template = JSON.parse(form.template);
    } catch (e) {
      console.log("----.testReport.index.vue..__template = JSON.parse(form.template);,", ex)
    }
  }
  dialogFormVisible_template.value = false;
}
const onSubmitJsonDatas = () => {
  if (form.jsonDatas.length > 0) {
    try {
      __jsonDatas = JSON.parse(form.jsonDatas);
    } catch (ex) {
      console.log("------.testReport.index.vue.. __jsonDatas = JSON.parse(form.jsonDatas);,", ex)
    }
  }
  dialogFormVisible_jsonDatas.value = false;
}
const onSubmitonUpdateDatasetList = () => {

  if (form.onUpdateDatasetList.length > 0) {
    try {
      __onUpdateDatasetList = JSON.parse(form.onUpdateDatasetList)

    } catch (ex) {
      console.log("------.testReport.index.vue..  JSON.parse(form.onUpdateDatasetList),", ex)
    }
  }
  dialogFormVisible_onUpdateDatasetList.value = false;
}
const onSubmitonUpdateData = () => {
  if (form.onUpdateData.length > 0) {
    try {
      __onUpdateData = JSON.parse(form.onUpdateData);
    } catch (ex) {
      console.log("-----.testReport.index.vue..  JSON.parse(form.onUpdateData),", ex)
    }
  }
  dialogFormVisible_onUpdateData.value = false;
}

onMounted(() => {
  sheet = XZReport("#xzreport_testReport1", option);//是报表展现端，不少报表设计器端

});
const get_onupdatedatamaps = () => {
  let all_onupdatedatamaps = new Map();
  __onUpdateData.forEach((item) => {
    all_onupdatedatamaps.set(item.name, item);
  })
  return all_onupdatedatamaps;
}
const onUpdateData = (datasets, params) => {
  console.log(".testReport.index.vue..datasets:", datasets, "params:", params);
  return new Promise((resolve, reject) => {
    let __rtn;
    try {
      __rtn = filterDatasetsFrom_params(datasets, params, __onUpdateDatasetList, get_onupdatedatamaps);
      if(__jsonDatas !=null && __jsonDatas.length >0){
        __jsonDatas.forEach(_item => {
          __rtn.push(_item)
        })

      }

    } catch (error) {
      console.log("---.testReport.index.vue..-----,", error);
    }
    resolve(__rtn);
  })
}
option.onUpdateData = onUpdateData
</script>

<style scoped>

</style>
